<template>
	<view class="detail-container">
		<view class="movie-header">
			<image :src="movie.poster" class="backdrop" mode="aspectFill"></image>
			<view class="header-overlay">
				<view class="movie-basic">
					<image :src="movie.poster" class="poster" mode="aspectFill"></image>
					<view class="basic-info">
						<text class="title">{{ movie.title }}</text>
						<text class="subtitle">{{ movie.originalTitle }}</text>
						<view class="meta-info">
							<text class="year">{{ movie.year }}</text>
							<text class="duration">{{ movie.duration }}</text>
							<text class="category">{{ movie.category }}</text>
						</view>
						<view class="rating-section">
							<uni-rate :value="movie.rating / 2" size="16" readonly></uni-rate>
							<text class="rating-score">{{ movie.rating }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="action-buttons">
			<button class="action-btn primary" @click="playMovie">
				<uni-icons type="play-filled" size="20" color="#ffffff"></uni-icons>
				立即播放
			</button>
			<button class="action-btn secondary" @click="toggleFavorite">
				<uni-icons :type="isFavorite ? 'heart-filled' : 'heart'" size="20" :color="isFavorite ? '#ff6b35' : '#ffffff'"></uni-icons>
				{{ isFavorite ? '已收藏' : '收藏' }}
			</button>
		</view>
		
		<view class="content-sections">
			<view class="section">
				<text class="section-title">剧情简介</text>
				<text class="description">{{ movie.description }}</text>
			</view>
			
			<view class="section" v-if="formattedCast.length > 0">
				<text class="section-title">演员阵容</text>
				<scroll-view scroll-x="true" class="cast-scroll">
					<view class="cast-list">
						<view v-for="actor in formattedCast" :key="actor.id" class="cast-item">
							<image :src="actor.avatar" class="cast-avatar" mode="aspectFill"></image>
							<text class="cast-name">{{ actor.name }}</text>
							<text class="cast-role">{{ actor.role }}</text>
						</view>
					</view>
				</scroll-view>
			</view>
			
			<view class="section">
				<text class="section-title">相关推荐</text>
				<scroll-view scroll-x="true" class="recommend-scroll">
					<view class="recommend-list">
						<view v-for="item in recommendations" :key="item.id" class="recommend-item" @click="goToDetail(item.id)">
							<image :src="item.poster" class="recommend-poster" mode="aspectFill"></image>
							<text class="recommend-title">{{ item.title }}</text>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
import { useMovieStore } from '@/stores/movie.js'

export default {
	data() {
		return {
			movieId: null,
			isFavorite: false,
			movie: {
				id: 1,
				title: '加载中...',
				year: '',
				duration: '',
				category: '',
				rating: 0,
				poster: '/static/logo.png',
				description: '',
				director: '',
				cast: []
			}
		}
	},
	setup() {
		const movieStore = useMovieStore()
		return {
			movieStore
		}
	},
	computed: {
		recommendations() {
			// 获取推荐电影（排除当前电影）
			return this.movieStore.movies
				.filter(movie => movie.id != this.movieId)
				.slice(0, 5)
		},
		formattedCast() {
			// 将演员数组转换为详情页需要的格式
			if (Array.isArray(this.movie.cast)) {
				return this.movie.cast.map((actor, index) => ({
					id: index + 1,
					name: actor,
					role: '演员',
					avatar: '/static/logo.png'
				}))
			}
			return []
		}
	},
	onLoad(options) {
		if (!this.checkLoginStatus()) return

		if (options.id) {
			this.movieId = options.id
			this.initData()
			this.loadMovieDetail()
		}
		this.checkFavoriteStatus()
	},
	onShow() {
		this.checkLoginStatus()
	},
	methods: {
		// 初始化数据
		initData() {
			this.movieStore.initMovieData()
		},

		checkLoginStatus() {
			const userInfo = uni.getStorageSync('userInfo')

			// 如果没有登录信息，跳转到登录页
			if (!userInfo || (!userInfo.isLogin && !userInfo.isGuest)) {
				uni.redirectTo({
					url: '/pages/login/login'
				})
				return false
			}
			return true
		},

		loadMovieDetail() {
			// 从movieStore获取电影详情
			const movieData = this.movieStore.getMovieById(this.movieId)

			if (movieData) {
				this.movie = {
					...movieData,
					originalTitle: movieData.title // 如果没有原标题，使用标题
				}
			} else {
				uni.showModal({
					title: '错误',
					content: '电影不存在',
					showCancel: false,
					success: () => {
						uni.navigateBack()
					}
				})
			}
		},
		
		checkFavoriteStatus() {
			// 检查是否已收藏
			const favorites = uni.getStorageSync('favorites') || []
			this.isFavorite = favorites.includes(this.movieId)
		},
		
		playMovie() {
			uni.showToast({
				title: '开始播放电影',
				icon: 'success'
			})
			// 这里应该跳转到播放页面或调用播放器
		},
		
		toggleFavorite() {
			let favorites = uni.getStorageSync('favorites') || []
			
			if (this.isFavorite) {
				// 取消收藏
				favorites = favorites.filter(id => id !== this.movieId)
				this.isFavorite = false
				uni.showToast({
					title: '已取消收藏',
					icon: 'none'
				})
			} else {
				// 添加收藏
				favorites.push(this.movieId)
				this.isFavorite = true
				uni.showToast({
					title: '收藏成功',
					icon: 'success'
				})
			}
			
			uni.setStorageSync('favorites', favorites)
		},
		
		goToDetail(movieId) {
			uni.redirectTo({
				url: `/pages/detail/detail?id=${movieId}`
			})
		}
	}
}
</script>

<style scoped>
.detail-container {
	background: #f5f5f5;
	min-height: 100vh;
}

.movie-header {
	position: relative;
	height: 500rpx;
	background: #ffffff;
}

.backdrop {
	width: 100%;
	height: 100%;
	filter: blur(10rpx);
}

.header-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.4);
	display: flex;
	align-items: flex-end;
	padding: 40rpx;
}

.movie-basic {
	display: flex;
	gap: 30rpx;
	width: 100%;
}

.poster {
	width: 200rpx;
	height: 280rpx;
	border-radius: 12rpx;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.3);
}

.basic-info {
	flex: 1;
	color: #ffffff;
}

.title {
	font-size: 36rpx;
	font-weight: bold;
	display: block;
	margin-bottom: 10rpx;
}

.subtitle {
	font-size: 28rpx;
	color: #cccccc;
	display: block;
	margin-bottom: 20rpx;
}

.meta-info {
	display: flex;
	gap: 20rpx;
	margin-bottom: 20rpx;
	flex-wrap: wrap;
}

.year, .duration, .category {
	font-size: 24rpx;
	color: #ffffff;
	padding: 8rpx 16rpx;
	background: rgba(255, 255, 255, 0.2);
	border-radius: 20rpx;
}

.rating-section {
	display: flex;
	align-items: center;
	gap: 15rpx;
}

.rating-score {
	font-size: 32rpx;
	font-weight: bold;
	color: #ff6b35;
}

.action-buttons {
	display: flex;
	gap: 20rpx;
	padding: 30rpx 40rpx;
	background: #ffffff;
}

.action-btn {
	flex: 1;
	height: 80rpx;
	border-radius: 40rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10rpx;
	font-size: 28rpx;
	border: none;
}

.primary {
	background: linear-gradient(45deg, #ff6b35, #ff8c42);
	color: #ffffff;
}

.secondary {
	background: #f8f8f8;
	color: #333333;
	border: 2rpx solid #e0e0e0;
}

.content-sections {
	padding: 0 40rpx 40rpx;
}

.section {
	margin-bottom: 50rpx;
	background: #ffffff;
	padding: 30rpx;
	border-radius: 12rpx;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.section-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333333;
	display: block;
	margin-bottom: 30rpx;
}

.description {
	color: #666666;
	font-size: 28rpx;
	line-height: 1.6;
}

.cast-scroll, .recommend-scroll {
	white-space: nowrap;
}

.cast-list, .recommend-list {
	display: flex;
	gap: 30rpx;
}

.cast-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 120rpx;
}

.cast-avatar {
	width: 100rpx;
	height: 100rpx;
	border-radius: 50rpx;
	margin-bottom: 15rpx;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.cast-name {
	color: #333333;
	font-size: 24rpx;
	text-align: center;
	margin-bottom: 8rpx;
}

.cast-role {
	color: #999999;
	font-size: 20rpx;
	text-align: center;
}

.recommend-item {
	width: 200rpx;
}

.recommend-poster {
	width: 200rpx;
	height: 280rpx;
	border-radius: 12rpx;
	margin-bottom: 15rpx;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.recommend-title {
	color: #333333;
	font-size: 24rpx;
	text-align: center;
	display: block;
}
</style>
